<template>
  <div class="game-manager">
    <ScoreDisplay
      ref="scoreDisplay"
      :trigger-value="currentScroe"
      class="fixed-score-display"
      @scoreUpdated="handleScoreUpdated"
      @fireworkTriggered="triggerFireworks"
    />

    <div class="level-info" v-if="currentLevel < levels.length">
      <h2>{{ currentLevelConfig.name }}</h2>
      <p>{{ currentLevelConfig.description }}</p>
      <div class="level-progress">
        关卡 {{ currentLevel + 1 }} / {{ levels.length }}
      </div>
    </div>
    <transition name="level-fade" mode="out-in">
      <GameLevel
        v-if="currentLevel < levels.length"
        :key="'level-' + currentLevel + '-' + resetKey"
        :level-config="currentLevelConfig"
        ref="gameLevel"
        @levelCompleted="handleLevelCompleted"
      />

      <div v-else class="game-completed">
        <h1>恭喜你完成了所有关卡!</h1>
        <button @click="restartGame">重新开始</button>
      </div>
    </transition>

    <!-- <button class="reset-button" @click="resetCurrentLevel" v-if="currentLevel < levels.length">
        重试当前关卡
      </button> -->

    <Fireworks
      ref="fireworksRef"
      :auto-start="false"
      :duration="10"
      :visible="showFireworksComponent"
      @timeout="onFireworksEnd"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from "vue";
import GameLevel from "./GameLevel.vue";
import { levels, LevelConfig } from "@/game/levels";
import Fireworks from "./Fireworks.vue";
import ScoreDisplay from "./ScoreDisplay.vue";

const currentLevel = ref(0);
const isTransitioning = ref(false);
const gameLevel = ref<InstanceType<typeof GameLevel>>();
const resetKey = ref(0);
const showFireworksComponent = ref(false);

const currentScroe = ref(0);

const fireworksRef = ref<InstanceType<typeof Fireworks>>();
const scoreDisplay = ref(null);

const showFireworks = async () => {
  console.log("🎆 触发烟花显示");
  showFireworksComponent.value = true;

  await nextTick();
  await new Promise((resolve) => setTimeout(resolve, 50)); // 确保DOM更新

  // if (fireworksRef.value) {
  //   fireworksRef.value.startAnimation();
  // }
};

function triggerFireworks() {
  showFireworksComponent.value = true;
  nextTick(() => {
    if (fireworksRef.value) {
      fireworksRef.value.startAnimation();
    }
  });
}

const onFireworksEnd = () => {
  console.log("🎇 烟花自然结束");
  showFireworksComponent.value = false; // 在这里隐藏组件
};

const currentLevelConfig = computed<LevelConfig>(() => {
  return JSON.parse(JSON.stringify(levels[currentLevel.value]));
});

function handleLevelCompleted() {
  if (isTransitioning.value) return;
  isTransitioning.value = true;
  showFireworks();

  // scoreDisplay.value.addScore(20);
  currentScroe.value++;
  setTimeout(() => {
    currentLevel.value++;
    isTransitioning.value = false;
  }, 3000);
}

function restartGame() {
  currentLevel.value = 0;
  isTransitioning.value = false;
  resetKey.value++;
  //   nextTick(() => {
  //     if (gameLevel.value) {
  //       gameLevel.value.resetLevel();
  //     }
  //   });
}

function resetCurrentLevel() {
  resetKey.value++;
  nextTick(() => {
    if (gameLevel.value) {
      gameLevel.value.resetLevel();
    }
  });
}

function handleScoreUpdated(newScore) {
  console.log(`当前分数: ${newScore}`);
}
</script>

<style scoped>
.game-manager {
  position: relative;
  width: 100%;
  height: 100%;
}

.level-info {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 15px;
  border-radius: 8px;
  max-width: 300px;
}

.level-info h2 {
  margin: 0 0 5px 0;
  color: #333;
}

.level-info p {
  margin: 0 0 10px 0;
  color: #666;
}

.level-progress {
  font-weight: bold;
  color: #2c3e50;
}

.game-completed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 2rem;
}

.game-completed button,
.reset-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.game-completed button:hover,
.reset-button:hover {
  background-color: #45a049;
}

.reset-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #f39c12;
}

.reset-button:hover {
  background-color: #e67e22;
}

.level-fade-enter-active,
.level-fade-leave-active {
  transition: all 0.5s ease;
}

.level-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.level-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 添加游戏完成时的庆祝效果 */
.game-completed {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.fixed-score-display {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}
</style>
